<route lang="json5">
{
  style: {
    navigationBarTitleText: '借书',
    navigationStyle: 'custom',
    // #ifdef MP-ALIPAY
    enablePullDownRefresh: false,
    'mp-alipay': {
      allowsBounceVertical: 'NO',
      transparentTitle: 'always',
      titlePenetrate: 'YES',
      defaultTitle: '',
    },
    // #endif
  },
}
</route>
<template>
  <CustomNavbar :title="'借书'" />
  <view class="container">
    <uni-forms class="form" ref="order" :modelValue="order">
      <uni-forms-item label="借阅人" name="name">
        <view class="master" @tap="selectMasterUser">
          <view class="master-avatar">
            <image :src="order.masterUserAvatar || DEFAULT_IMAGE"></image>
          </view>
          <view class="master-name">
            <uni-easyinput
              type="text"
              v-model="order.masterUserName"
              placeholder="请选择借阅人"
              :disabled="true"
            />
            <view class="edit-icon">
              <image src="@/static/home/edit.png" mode="" />
            </view>
          </view>
        </view>
      </uni-forms-item>
      <uni-forms-item label="借阅书籍" name="bookName">
        <view class="master" @tap="selectBook">
          <view class="master-name">
            <uni-easyinput
              type="text"
              v-model="order.bookName"
              placeholder="请选择借阅书籍"
              :disabled="true"
            />
            <view class="edit-icon">
              <!-- <button class="mini-btn select-button" type="primary" size="mini"> -->
              <image class="edit-icon" src="@/static/home/edit.png" mode="" />
            </view>
            <!-- </button> -->
          </view>
        </view>
      </uni-forms-item>
      <uni-forms-item label="归还日期" name="birthday">
        <view class="master">
          <picker mode="date" :value="order.deadline" @change="deadlineChange">
            <view class="uni-input">{{ order.deadline }}</view>
          </picker>
        </view>
      </uni-forms-item>
      <uni-forms-item label="备注" name="description">
        <uni-easyinput type="textarea" v-model="order.remark" placeholder="请输入备注" />
      </uni-forms-item>

      <div class="bottom">
        <view class="submit" @click="submit">申请借阅</view>
      </div>
    </uni-forms>
  </view>
  <!-- <div class="borrow" @click="showPopup">borrow</div> -->

  <!-- <view> -->
  <!-- <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content"> -->

  <!-- </view> -->
  <!-- </uni-popup>
  </view> -->
</template>

<script lang="ts" setup>
import CustomNavbar from '@/components/CustomNavbar.vue'
import { DEFAULT_IMAGE } from '@/store/contants'
import { useOrderStore } from '@/store/order'
import { useUserStore } from '@/store/user'
import { borrowApi } from '@/service/order'
import { Order } from '@/types/order'
import { Book } from '@/types/book'
import { bookInfoApi } from '@/service/book'
import { userInfoApi } from '@/service/user'

// import { UniPopupInstance } from '@uni-helper/uni-ui-types/index'

const orderRef = useOrderStore()
const userRef = useUserStore()
const order = orderRef.order

const props = defineProps<{
  bookId: number
  userId: number
}>()

onLoad(async () => {
  if (props.bookId && props.userId) {
    const bookRes = await bookInfoApi(props.bookId)
    order.masterUserId = bookRes.data.userId
    order.masterUserName = bookRes.data.userName
    order.masterUserAvatar = bookRes.data.userAvatar
    order.bookId = bookRes.data.id
    order.bookName = bookRes.data.bookName
    order.bookAvatar = bookRes.data.bookAvatar
  }
})

const selectMasterUser = () => {
  uni.navigateTo({ url: '/pages/functions/select?type=1' })
}

const selectBook = () => {
  if (!order.masterUserId) {
    uni.showToast({
      title: '请选择借阅人',
      icon: 'none',
      mask: true,
    })
    return
  }
  uni.navigateTo({ url: '/pages/functions/select?type=2&masterUserId=' + order.masterUserId })
}

const deadlineChange = (ev) => {
  order.deadline = ev.detail.value
}

const submit = async () => {
  order.borrowUserId = userRef.userInfo.id
  order.borrowUserName = userRef.userInfo.nickname
  order.borrowUserAvatar = userRef.userInfo.avatar
  console.log('order req', order)
  const borrowRes = await borrowApi(order)
  console.log(borrowRes)
  if (borrowRes.code !== 0) {
    return
  }
  orderRef.clearOrder()
  wx.requestSubscribeMessage({
    tmplIds: ['Op5iU07jnNR76kBn9a9_Cn9LYeR7nbSCsXh_BwxicCY'],
    complete: (complete) => {
      console.log('complete', complete)
      if (props.bookId && props.userId) {
        uni.navigateBack({ delta: 2 })
      } else {
        uni.navigateBack()
      }
      uni.showToast({ icon: 'none', title: '申请成功' })
    },
  })
}
</script>

<style lang="scss">
.container {
  padding: 30rpx;
}

.master {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  .master-avatar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 50%;
    margin-bottom: 30rpx;
    image {
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
    }
  }
  .master-name {
    display: flex;
    flex-direction: row;
    justify-content: start;
    .edit-icon {
      height: 80rpx;
      margin-left: 10rpx;
      line-height: 80rpx;
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
}

.uni-input {
  width: 100%;
  margin-right: 70rpx;
}

.bottom {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  margin-top: 70rpx;
  > .submit {
    width: 80%;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    text-align: center;
    background: $main-color;
  }
}
</style>
